import { NTag } from 'naive-ui'
import { useI18n } from 'vue-i18n'

import { RoleItem } from '@/apis/role/type/vo'
import { DetailsList } from '@/types/interface'
import { statusMap } from '@/types/map'

export function useDetails() {
  const { t } = useI18n()

  // 详情显示
  const detailsShow = ref(false)

  // 详情数据
  const detailsData = ref<Partial<RoleItem>>({})

  // 详情表单
  const detailsDataList = computed((): DetailsList<RoleItem> => {
    return [
      {
        key: 'id',
        label: 'id',
        value: detailsData.value.id,
      },
      {
        key: 'key',
        label: t('role.key'),
        value: detailsData.value.key,
      },
      {
        key: 'name',
        label: t('role.name'),
        value: detailsData.value.name,
      },
      {
        key: 'sort',
        label: t('common.sort'),
        value: detailsData.value.sort,
      },
      {
        key: 'status',
        label: t('common.status'),
        render() {
          if (!detailsData.value.status) return '--'
          const config = statusMap[detailsData.value.status]
          return <NTag type={config.type}>{t(config.text)}</NTag>
        },
      },
      {
        key: 'remark',
        label: t('common.remark'),
        value: detailsData.value.remark,
      },
      {
        key: 'create_time',
        label: t('common.create_time'),
        value: detailsData.value.create_time,
      },
      {
        key: 'update_time',
        label: t('common.update_time'),
        value: detailsData.value.update_time,
      },
    ]
  })

  return {
    detailsShow,
    detailsData,
    detailsDataList,
  }
}
